<template>
  <div class="boxWangEditor">
    <Toolbar
      style="border-bottom: 1px solid #ccc;"
      :style="{ display: toolbarNone ? 'none' : 'block' }"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="content"
      :style="{height: `${height}px`}"
      :default-config="editorConfig"
      :mode="mode"
      class="Editor"
      @onCreated="onCreated"
      @onChange="onChange"
      @customPaste="customPaste"
    />
  </div>
</template>

<script>
/*
使用示例：
<wangEditor v-model="model.activityContent" />

import wangEditor from '@/components/xm/richText/wangEditor.vue'
components: {
  wangEditor
},

官网：https://www.wangeditor.com/
*/
// import { uploadAction } from '@/api/manage'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'RichTextWangEditor',
  components: {
    Editor, Toolbar
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    height: {
      type: Number,
      default: 634
    },
    value: {
      type: String,
      default: ''
    },
    // 是否隐藏全部工具栏
    toolbarNone: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      content: '', // 富文本内容
      imgCount: 0,
      imgMaxCount: 10,
      editor: null,
      toolbarConfig: {
      //   // 隐藏菜单 上传网络图
      //   excludeKeys: [
      //     'insertImage',
      //     'group-video'
      //   ]
      },
      editorConfig: {
      //   placeholder: '请输入内容...',
      //   // 所有的菜单配置，都要在 MENU_CONF 属性下
      //   MENU_CONF: {
      //     // 配置上传图片
      //     uploadImage: {
      //       customUpload: this.FileUploadImage
      //     },
      //     uploadVideo: {
      //       fieldName: 'file',
      //       server: `${process.env.VUE_APP_BASE_API}/common/file/upload`,
      //       headers: {
      //         Authorization: 'Bearer ' + this.$ls.get('TOKEN')
      //       },
      //       // maxNumberOfFiles: 3,
      //       maxFileSize: 10 * 1024 * 1024, // 10M
      //       onBeforeUpload(file) {
      //         console.log('onBeforeUpload', file)
      //         return file
      //       },
      //       onProgress(progress) {
      //         console.log('onProgress', progress)
      //       },
      //       onSuccess(file, res) {
      //         console.log('onSuccess', file, res)
      //       },
      //       onFailed: (file, res) => {
      //         this.$message.warning(res.message)
      //         console.log('onFailed', file, res)
      //       },
      //       onError: (file, err, res) => {
      //         console.error('onError', file, err, res)
      //         this.$message.warning(err.message)
      //       },
      //       customInsert(res, insertFn) {
      //         console.log('customInsert', res)
      //         insertFn(res.data)
      //       }
      //     }
        // }
      },
      mode: 'default' // or 'simple'
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal, oldVal) {
        this.content = newVal
      }
    }
  },
  created() {
    // // 初始化 wangEditor
    // var editor = new WangEditor('textareaId')
    // // 监听 customPaste 事件
    // editor.customPaste(function(content, html, text) {
    //   // 检查是否包含图片
    //   if (content.includes('img')) {
    //     // 获取图片元素
    //     var imgElement = content.match(/<img[^>]*>/g)
    //     if (imgElement && imgElement.length > 0) {
    //       // 处理图片元素
    //       console.log(imgElement)
    //     }
    //   }
    // })
  },
  beforeDestroy() {
    // 销毁富文本组件
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    // 粘贴事件
    customPaste(editor, event, callback) {
      // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
      // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
      // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
      // 返回 true ，继续默认的粘贴行为
      // callback(true)
      const files = event && event?.clipboardData?.files
      if (files && files.length > 0) {
        // 自定义插入内容
        // editor.insertText('file')
        event.preventDefault()
        callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
      }
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    // 值更新事件
    onChange() {
      this.$emit('change', this.content)
    },
    // 富文本自定义传图片
    FileUploadImage(file, insertFn) {
      // // if (this.imgCount > this.imgMaxCount) {
      // //   this.$message.warning(`图片最多上传${this.imgMaxCount}张`)
      // //   return
      // // }
      // const formData = new FormData()
      // formData.append('file', file)
      // // this.imgCount++ // 上传的图片计数
      // // console.log('this.imgCount', this.imgCount)
      // uploadAction('common/file/upload', formData).then((res) => {
      //   if (res.status === 0) {
      //     insertFn(res.data, file.name, '')
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.boxWangEditor{
  border: 1px solid #ccc;
  z-index: 2000;
  .Editor{
    overflow-y: hidden;
  }
}
</style>
